Bottom Sheets: Definition and UX Guidelines 底部彈窗
底部彈窗（Bottom Sheet）是一種移動端常見的使用者介面模式，用於在螢幕底部提供上下文資訊或操作選項。它允許使用者在當前檢視的上下文中，輕鬆訪問臨時資訊或控制選項。
底部彈窗的定義
底部彈窗是一種固定在移動裝置螢幕底部的覆蓋層，使用者點選時出現，用於顯示額外的細節或操作選項。其作為一種“漸進式揭示”方式，不會顯示始終需要的資訊，而是用於臨時展示上下文資訊或相關控制。
優勢
保持使用者當前的上下文，不需要切換頁面，減輕了使用者的記憶負擔。
相比完全覆蓋的對話方塊，底部彈窗保留了更多背景資訊的可見性，便於使用者在操作時參考。
錯誤觀點
很多人認為底部彈窗放在螢幕底部可以更方便點選，但這並不總是正確，因為使用者握持手機的方式多樣。事實上，螢幕的中部區域通常是更易點選的。
模態底部彈窗
模態底部彈窗類似於傳統的模態彈窗，使用者必須與之互動（或將其關閉）才能繼續其他操作。背景內容被半透明的遮罩層覆蓋，表明暫時不可用。
非模態底部彈窗
非模態底部彈窗無需強制互動，它展示在螢幕底部，使用者仍可與背景內容互動。這種彈窗適合在主介面中同時展示詳細資訊或選項。
可擴充套件底部彈窗
一些底部彈窗可透過點選或滑動擴充套件為全屏（或接近全屏）模態彈窗。通常在未展開時是非模態狀態，展開後成為模態彈窗。
底部彈窗的可用性指南
在使用者研究中，觀察到使用者在使用底部彈窗時會遇到以下問題：
- 缺乏清晰的關閉方式
- 底部彈窗的疊加
- 遮擋了重要的背景內容
允許使用“返回”按鈕關閉底部彈窗
底部彈窗擴充套件到全屏時，有時會像普通頁面一樣，使用者可能希望透過“返回”按鈕關閉彈窗。為了防止使用者困惑，建議支援“返回”按鈕來關閉底部彈窗，使使用者順暢地回到上一檢視。
新增關閉按鈕
儘管多數底部彈窗可以透過向下滑動或點選頂部的“抓手”關閉，但一些使用者可能不瞭解該功能，且滑動手勢易出錯。因此，建議在底部彈窗的頂部放置一個清晰的關閉按鈕（通常為“X”符號），以確保使用者能順利關閉彈窗。同時，此按鈕對螢幕閱讀器和無法滑動螢幕的使用者更加友好。
避免疊加多個底部彈窗
疊加多個底部彈窗會導致使用者迷失，難以判斷要關閉哪一個彈窗。建議避免使用底部彈窗來代替典型的頁面跳轉流程，因為底部彈窗是一種臨時UI元素，適合短暫的中斷或分支，而非主路徑的操作。舉例來說，不應將電商產品詳情頁設計為底部彈窗，因為使用者可能需要進一步瀏覽產品評論、規格等細節內容，單獨頁面更適合這種導航模式。
底部彈窗僅用於短時互動
底部彈窗適用於快速互動，因此不建議用於使用者需要花費較長時間檢視的內容。長內容在底部彈窗中展示容易導致使用者誤操作或誤關閉彈窗。
總結
底部彈窗是一種移動應用的UI模式，旨在在使用者保持對主要內容訪問的同時，提供臨時的上下文資訊。當用於展示少量選項或額外資訊時，底部彈窗能提供便捷的訪問方式；但不應用於多重疊加或長內容展示。